import React, { useState, useRef,useEffect } from 'react';  
  
interface ImageDragZoomProps {  
  src: string;  
  initialScale?: number;  
}  
  
const ImageDragZoom: React.FC<ImageDragZoomProps> = ({ src, initialScale = 1 }) => {  
  const [scale, setScale] = useState(initialScale);  
  const imgRef = useRef<HTMLImageElement>(null);  
  const [isDragging, setIsDragging] = useState(false);  
  const startY = useRef(0);  
  
  const handleMouseDown = (e: React.MouseEvent<HTMLImageElement>) => {  
    // 仅在图片上按下鼠标时开始拖拽  
    if (e.button === 0 && imgRef.current) {  
      setIsDragging(true);  
      startY.current = e.clientY;  
      e.preventDefault(); // 防止默认行为，如拖拽图片  
    }  
  };  
  
  const handleMouseMove = (e: any) => {  
    if (isDragging && imgRef.current) {  
      const dy = e.clientY - startY.current;  
      // 根据鼠标移动的距离调整缩放比例  
      // 注意：这里的缩放因子（0.01）和最小缩放比例（0.1）是示例值，可以根据需要调整  
      const newScale = Math.max(0.1, scale + 0.01 * dy);  
      setScale(newScale);  
      startY.current = e.clientY; // 更新起始位置为当前位置，以便连续计算  
    }  
  };  
  
  const handleMouseUp = () => {  
    setIsDragging(false);  
    // 可以在这里添加清理代码，例如移除全局的事件监听器（如果需要的话）  
    // 但在这个例子中，我们没有添加全局事件监听器，所以不需要清理  
  };  
  
  // 确保在组件卸载时移除事件监听器（虽然在这个例子中我们没有直接添加）  
  useEffect(() => {  
    return () => {  
      // 清理代码（如果有）  
    };  
  }, []);  
  
  return (  
    <div  
      onMouseMove={handleMouseMove} // 注意：这里将mousemove监听器放在div上，以确保在拖拽时也能触发  
      onMouseUp={handleMouseUp} // 同样，mouseup监听器也放在div上  
      style={{  
        position: 'relative',  
        width: '100%', // 或其他宽度  
        height: 'auto', // 或其他高度  
        overflow: 'hidden', // 防止图片缩放后超出容器  
      }}  
    >  
      <img  
        src="https://img2.woyaogexing.com/2024/06/29/00284e82f994da9e7b60e936129cd5b6.jpg"
        ref={imgRef}  
        style={{  
          cursor: 'ns-resize', // 垂直缩放的光标  
          transform: `scale(${scale})`,  
          transformOrigin: 'top left', // 缩放原点，根据需要调整  
          transition: 'transform 0.1s ease', // 平滑的缩放效果  
          // 可能还需要设置图片的最大宽度/高度等，以避免缩放后超出容器  
        }}  
        onMouseDown={handleMouseDown}  
        draggable={false} // 禁止图片的默认拖拽行为  
      />  
    </div>  
  );  
};  
  
export default ImageDragZoom;